<template>
  <div class="goods-list">
    <van-nav-bar
      title="商品列表"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      class="fixed-top"
    />
    <ul>
      <li v-for="item in dityList" :key="item.id" @click="jumpDetail(item.id)">
        <router-link class="goods-body" to="#">
          <div class="goods-item">
            <img :src="item.img_url" alt="tiem.title">
            <h4 class="goods-title">{{item.title}}</h4>
            <div class="price-info">
              <span class="price-new">{{item.sell_price}}</span>
              <span class="price-old">{{item.market_price}}</span>
            </div>
            <div class="sell-info">
              <span class="sell-status">热卖中</span>
              <span class="sell-leftcount">剩下{{item.stock_quantity}}件</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { getDity } from '@/api'
export default {
  data () {
    return {
      pageindex: 1,
      dityList: []
    }
  },
  created () {
    this.initDityList()
  },
  methods: {
    initDityList () {
      getDity(this.pageindex).then(res => {
        console.log(res)
        this.dityList = res.data.message
      })
    },
    jumpDetail (id) {
      this.$router.push({ name: 'dityDetail', params: { id } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-list {
    background-color: #f4f4f4;
    h4 {
      font-size: 12px;
      font-weight: bold;
      height: 32px;
      // 多行文本超出省略号
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .goods-body {
      .goods-item {
        float: left;
        width: 50%;
        box-sizing: border-box;
        padding-bottom: 30px;
        position: relative;
        background-color: white;
        &:nth-child(2n + 1) {
          padding-left: 2px;
          padding-right: 20px;
        }
        &:nth-child(2n) {
          padding-right: 2px;
          padding-left: 20px;
        }
        img {
          width: 165.5px;
          height: 165.5px;
        }
        .goods-title {
          box-sizing: border-box;
          height: 31px;
          font-size: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-word;
          color: #232326;
          margin-top: 5px;
          line-height: 16px;
          margin-bottom: 3px;
          padding: 0 4px;
        }
        .price-info {
          position: relative;
          height: 26px;
          font-size: 13px;
          overflow: hidden;
          .price-new {
            color: #f23030;
            position: relative;
            top: 1px;
            height: 25px;
            line-height: 25px;
          }
          .price-old {
            position: absolute;
            top: 1px;
            right: 0px;
            color: #686868;
            width: 49px;
            height: 25px;
            line-height: 25px;
            text-decoration: line-through;
          }
        }
        .sell-info {
          display: flex;
          font-size: 16px;
          justify-content: space-between;
          .sell-status {
            color: #ff4444;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
